<template>
    <div class=" container mx-auto">
        <h1 class=" font-bold">account api</h1>
        <div class=" flex gap-2">
            <button :disabled="store.requesting" class=" disabled:bg-slate-300 bg-blue-500 text-white p-2 rounded" @click="click_register">register account</button>
            <button class=" bg-blue-500 text-white p-2 rounded">login account</button>
            <!-- <button class=" bg-blue-500 text-white p-2 rounded">put account</button> -->
            <!-- <button class=" bg-blue-500 text-white p-2 rounded">delete account</button> -->
        </div>
        <h1 class=" font-bold">todos api</h1>
        <div class=" flex gap-2">
            <button class=" bg-blue-500 text-white p-2 rounded">post todo</button>
            <button class=" bg-blue-500 text-white p-2 rounded">get todos</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { UsersApi } from '../../api/index.js'
import { useUserStore } from '../../stores/user.store.js'
let store = useUserStore()
async function click_register() {
    try {
        let res = await UsersApi.register({
            username: 'test1',
            password: '123456',
        })
        console.log(res)
    } catch (error) {
        console.log("object",error)
    }
}

</script>

<style scoped></style>